<template>
    <div>
      <!-- router-link router-view 是router提供的两个全局组件 -->
      <!--  query传参 :to={path:'/',query:参数}   任何组件都可以通过 this.$route.query 获取 --> 
      <!--  params传参  :to={name：，params:{属性名 跟 路由映射表中对应}}  任何组件都可以通过 this.$route.params 获取-->
        <router-link  to="/">首页</router-link>
        <router-link  tag='button' to="/about">关于页</router-link>
        <!-- <router-link  :to="{path:'/',query:obj}">首页</router-link>
        <router-link  :to="{name:'Home'}">首页</router-link>
        <router-link  tag='button' :to="{name:'About',params:{qqq:123}}">关于页</router-link> -->
        
        <div class='box'>
          <router-view></router-view>
          <!-- <router-view></router-view>
          <router-view></router-view>
          <router-view></router-view> -->
        </div>

        <button @click='fn'>异步跳转</button>
    </div>
</template>
<script>

// @ is an alias to /src
export default {
    name: 'XXX',
    data() {
        return {
          obj:{aa:123,bb:234,cc:345}
        }
    },
    methods: {
      fn(){
        setTimeout(()=>{
          // 使用编程式 导航
          // push的参数  等同于  to后边的内容
          // this.$router.push('/about/777')
          // $router中存储的都是一些 方法；  $route 中存储的都是一些参数
          // go()  back()
          this.$router.push({name:'About',params:{qqq:5555}})
          // this.$router.replace({name:'About',params:{qqq:5555}})
          // push  replace??? 
          //每一次push都会新增一条历史记录 但是 replace不会

        },2000)
      }
    },
    created() {
      console.log(this)
    },
    components: {
        
    }
}
</script>
<style lang="less">

</style>